<template>
	<view class="content">
		<view style="margin-bottom: 20rpx;">
			<view class="part dis_f_sb_c">
				<view>收货人</view>
				<input type="text" placeholder="请填写收货人姓名" v-model="formData.name" />
			</view>
			<view class="part dis_f_sb_c">
				<view>手机号</view>
				<input placeholder="请填写收货人手机号" maxlength="11" type="number" v-model="formData.mobile" />
			</view>
			<view class="part dis_f_sb_c" @click="addressShow = true">
				<view>所在区域</view>
				<view class="dis_f_sb_c" style="width: 500rpx;">
					<input v-model="formData.addresstext" type="text" disabled placeholder="请选择省/市/区"
						style="flex: 1;" />
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="part dis_f_sb_c">
				<view>详细地址</view>
				<input placeholder="请输入街道地址" type="text" v-model="formData.address" />
			</view>
		</view>
		<view class="part dis_f_sb_c" style="margin-bottom: 60rpx;">
			<view>设为默认地址</view>
			<u-switch v-model="formData.is_default"></u-switch>
		</view>
		<view class="dis_f_c_c">
			<view class="btn" :class="checkform()?'btn1':'btn2'" @click="submit">保存</view>
		</view>

		<pickerAddress v-model="addressShow" @confirm="addresspick" />
	</view>
</template>

<script>
	import form from '../../uni_modules/uview-ui/libs/config/props/form';
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		components: {

			pickerAddress
		},
		data() {
			return {
				id: null,
				formData: {
					province_id: null,
					city_id: null,
					country_id: null,
					address: null,
					name: null,
					mobile: null,
					is_default: false,
					addresstext: null
				},
				addressShow: false,


			};
		},

		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.get_detail()
			}
		},
		methods: {
			get_detail() {
				this.$.ajax(1, "POST", "user/getaddressdetail", {
					id: this.id
				}, (res) => {
					if (res.code == 1) {
						const e = res.data.detail
						this.formData.address = e.address
						this.formData.province_id = e.province_id
						this.formData.city_id = e.city_id
						this.formData.country_id = e.country_id
						this.formData.name = e.name
						this.formData.mobile = e.mobile
						this.formData.is_default = e.is_default == 0 ? false : true
						this.formData.addresstext = e.province_name + e.city_name + e.country_name
					} else {
						this.$.ti_shi(res.msg)
					}
				})
			},
			submit() {
				var that = this
				if (this.checkform(1)) {
					let data = this.formData
					data.is_default = this.formData.is_default ? '1' : '0'
					if (this.id !== null) {
						data.id = this.id
					}
					this.$.ajax(1, "POST", "user/saveaddress", data, (res) => {
						this.$.ti_shi(res.msg)
						if (res.code == 1) {
							setTimeout(() => {
								that.$.back()
							}, 500)
						}
					})
				}
			},
			checkform(type) {

				if (this.formData.name == null) {
					if (type == 1) {
						this.$.ti_shi('请填写收货人姓名')
					}
					return false
				}
				if (this.formData.mobile == null) {
					if (type == 1) {
						this.$.ti_shi('请填写收货人手机号')
					}
					return false
				}

				if (!this.$.is_phone(this.formData.mobile)) {
					if (type == 1) {
						this.$.ti_shi('手机号格式有误')
					}
					return false
				}
				if (this.formData.addresstext == null) {
					if (type == 1) {
						this.$.ti_shi('请选择省市区')
					}
					return false
				}
				if (this.formData.address == null) {
					if (type == 1) {
						this.$.ti_shi('请输入街道地址')
					}
					return false
				}
				return true
			},
			addresspick(obj) {
				console.log(obj)
				this.formData.province_id = obj.provice
				this.formData.city_id = obj.city
				this.formData.country_id = obj.area
				this.formData.addresstext = obj.address
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn1 {
		background: linear-gradient(270deg, #003DB1 0%, #0096FF 100%);
		color: #fff;
	}

	.btn2 {
		background: #eee;
		color: #666;
	}

	.btn {
		width: 686rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.part {
		height: 100rpx;
		border-bottom: 1px solid #f4f4f4;
		background-color: #fff;
		font-size: 26rpx;
		padding: 0 30rpx;
		color: #222;

		input {
			font-size: 26rpx;
			width: 500rpx;
		}
	}
</style>